<template>
	<view class="content">
		<view class="one">
			<view class="avatar">
				<u-upload :fileList="fileList" @afterRead="afterRead" name="file" :maxCount="1" :multiple="false">
					<u-avatar :src="IMG_URL+ data.avatar" size="100"></u-avatar>
				</u-upload>
				<view v-if="data.username" class="name">
					{{ data.username }}
				</view>
				<view v-else class="mobile">
					{{data.mobile}}
				</view>
			</view>

			<view class="personal_center" @click="goPerson()">
				个人中心<u-icon name="arrow-right" color="#8f8f8f" size="15"></u-icon>
			</view>
		</view>
		<view class="two" @click="toInfo()">
			<view class="logo-box">
				<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="50"
					height="50"></u--image>
				<span style="color:#444;font-size: 15px;">基础信息</span>
			</view>
			<u-icon name="arrow-right" color="#444" size="15"></u-icon>
		</view>
		<view class="three" @click="goAuditing()">
			<view class="logo-box">
				<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="40" height="40"></u--image>
				<span style="color:#444;font-size: 15px;">审核记录</span>
			</view>
			<u-icon name="arrow-right" color="#444" size="15"></u-icon>
		</view>
		<view class="four">
			<view class="four-header">
				<view class="name">
					培训服务
				</view>
				<view class="more">
					更多
					<u-icon name="arrow-right" color="#444" size="15"></u-icon>
				</view>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list">
					<u--image :showLoading="true" src="../../static/imgs/word.png" width="50px" mode="widthFix"
						height="50px" @click="peixun(listItem.id)"></u--image>
					<text class="grid-text">{{listItem.name}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
	</view>
	</view>
</template>

<script>
	import {
		IMG_URL,
	} from "@/config/app.js";
	import {
		uploadImage,
		updateAvatar,
		getInformation,
		getTrain
	} from "../../api/my.js";
	export default {
		data() {
			return {
				data: {},
				IMG_URL: IMG_URL,
				fileList: [],
				list:[]
			}
		},
		onLoad() {

		},
		onShow() {
			this.getinfo()
			this.getTrains()
		},
		mounted() {

		},
		methods: {
			async afterRead(e) {
				const res = await uploadImage(e.file.url)
				let url = res.data.url
				if (res.code == 1) {
					await updateAvatar({
						'avatar': res.data.url
					}).then(res => {
						if (res.code == 1) {
							this.data.avatar = url
						}
					})
				}
			},
			async getinfo() {
				await getInformation().then(res => {
					console.log('获取个人信息', res);
					this.data = res.data
				});
			},
			async getTrains() {
				await getTrain().then(res => {
					console.log('获取培训书列表', res);
					this.list = res.data
				});
			},
			toInfo() {
				uni.navigateTo({
					url: '/pages/index/info'
				})
			},
			goAuditing() {
				uni.navigateTo({
					url: '/pages/index/audit'
				})
			},
			goPerson() {
				uni.navigateTo({
					url: '/pages/index/me'
				})
			},
			peixun(id) {
				
				// const url = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx')}`
				// window.open(url) //新建窗口打开链接预览
				// //或
				// window.location.href = (url); //本页面内跳转链接实现预览，留页面历史记录
				// //或
				// location.replace(url); //本页面内跳转链接实现预览，不留页面历史记录
				uni.navigateTo({
					url: '/pages/index/word?train_id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		    background-color: #e8f0fe;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    height: 100vh;
		    justify-content: space-around;
	}

	.one {
		// margin-top: 30px;
		width: 85%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 120rpx;

		.avatar {
			display: flex;

			.name {
				font-size: 20px;
				color: #444;
				margin-left: 20px;
			}
			.mobile {
				color: #444;
				font-size: 20px;
			}
		}

		.personal_center {
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #8f8f8f;
		}
	}

	.two {
		// margin-top: 30px;
		width: 85%;
		border: 1rpx solid #8f8f8f;
		border-radius: 10px;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.logo-box {
			margin-left: 10px;
			display: flex;
			align-items: center;

			span {
				margin-left: 20px;
			}
		}
	}

	.three {
		width: 85%;
		// margin-top: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.logo-box {
			display: flex;
			align-items: center;

			span {
				margin-left: 20px;
			}
		}
	}

	.four {
		// margin-top: 55px;
		width: 85%;

		.four-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20px;

			.name {
				color: #444;
				font-size: 15px;
			}
			
			.more {
				font-size: 15px;
				color: #444;
				display: flex;
				align-items: center;
			}
		}
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>